iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
0
自我挑戰組

JavaScript自我學習系列 第 1

{Day1}利用CLASS屬性選取元件

  • 分享至 

  • xImage
  •  

鐵人賽第一天。。。請各位前輩大大不吝指教,如果有錯誤或是有相關建議非常歡迎且感謝前輩大大們提出。
菜逼八的我最近在寫支程式遇到了個困難(這個困難可能要明天才會想辦法寫出來了XDDD)。
點擊click物件時,會隱藏(display:none)、顯示(dispaly:block)CSS的一個動態呈現。
不過在此次專案的案例中,不使用Id選取資料,而是用Class去選取。因為資料再增減時,是用VUE長出來的多筆資料,因此也不確定何時會增減一筆資料,當時有使用Id去做選取,但後來發現,他只會選到第一筆,後來才意識到,Id為一個標籤元件節點,因此要使用Class去做選取多個標籤元件節點。

觸發"事件",執行cc()這段function
onclick="cc()"

以下是我的JS程式碼

function cc(){
//向HTML抓dropup這個名稱的Class
var x=document.getElementsByClassName("dropup")
var i;
//跑For迴圈,i<x.length 的意思是說i這個變數要,小於等於的迴圈運行一直到x變數的長度為止。
for(i=0; i<=x.length; i++){
    if(x[i].style.display ==='none'){
        x[i].style.display = 'block';
        }
        else{
        x[i].style.display='none';
        }
    }
};

接下來要來講一下,上面為什麼要先把if(x[i].style.display ==='none')設為完全等於none,因為這邊如果直接寫成for(i=0; i<x.length; i++){x[i].style.display = 'block';},這樣在做點擊的時候,物件是沒有收回去的功用的。因此要先讓程式判斷x[i].style.display完全等於none時執行x[i].style.display = 'block';
這樣一來,才能關回去,怎麼說關回去呢,你觸發onclick="cc()"事件後,此時的style會變成block(顯示)。那你再次點擊第二次時的x[i].style.display ==='none'會不成立(false)。因為不成立(false)所以不會跑x[i].style.display = 'block';這一行,而是會跑else的這一段程式碼 x[i].style.display='none';這樣一來x[i]就會被隱藏。

第二天要來寫今天遇到的頭痛問題,如何select到我指定的該x[i]中,而不是全部顯示或全部打開。。。XDDD
希望明天有解阿QQ"


下一篇
{Day2}陣列
系列文
JavaScript自我學習4
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言